import { SvgIcon } from "@/components/icon";
import { CircleLoading } from "@/components/loading";
import { Suspense, lazy } from "react";
import { Navigate, Outlet } from "react-router-dom";
import type { AppRouteObject } from "#/router";

const ProjectListPage = lazy(() =>
	import("@/pages/projects").then((module) => ({ default: module.default })),
);

const projects: AppRouteObject = {
	order: 2,
	path: "projects",
	element: (
		<Suspense fallback={<CircleLoading />}>
			<Outlet />
		</Suspense>
	),
	meta: {
		label: "项目管理",
		icon: (
			<SvgIcon
				icon="solar:folder-with-files-bold"
				className="ant-menu-item-icon"
				size="24"
			/>
		),
		key: "/projects",
	},
	children: [
		{
			index: true,
			element: <Navigate to="list" replace />,
		},
		{
			path: "list",
			element: <ProjectListPage />,
			meta: {
				label: "项目列表",
				key: "/projects/list",
			},
		},
	],
};

export default projects;
